<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
<script src="./resource/js/jquery-2.0.3.js" type="text/javascript"
	charset="utf-8"></script>
<link rel="stylesheet" href="./resource/layui/css/layui.css" media="all">
<style type="text/css">
body {
	width: 100%;
	height: 100%;
	background: url('./resource/image/Starry.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
</style>

</head>
<body>
	<!-- 布局 -->
	<div class="layui-container" align="center">
		<!-- 第一行开始 -->
		<div class="layui-row">
			<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">

				<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
			</div>

			<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
				<canvas id="canvas" width="500px" height="500px"></canvas>
			</div>
		</div>
		<!-- 第一行结束		 -->

		<!-- 第二行开始 -->
		<div class="layui-row" align="center">
			<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 " align="right">
				<input type="button" class="layui-btn layui-btn-normal"
					title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
			</div>
			<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 " align="left">
				<button id="snap" class="layui-btn layui-btn-normal"
					onclick="takePhoto()">人脸识别</button>
			</div>
		</div>
		<!-- 第二行结束 -->
		<!-- 第三行开始 -->
		<div class="layui-row" align="center">
			<div
				class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-md-offset4"
				align="center">
				<div id="msg"
					style="font-size: 20px; color: #FF0000; font-weight: bold;"></div>
				<!-- 设置隐藏域 -->
				<input type="hidden" name="" id="area" value="" />
			</div>

		</div>

		<!-- 第三行结束 -->
		<div>






			<script>
    //获得video摄像头区域
    let video = document.getElementById("video");
    function getMedia() {
        let constraints = {
            video: {width: 500, height: 500},
             audio: true
        };
        /*
        这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
        这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
        返回的是一个Promise对象。
        如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
        如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
        */
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
            video.srcObject = MediaStream;
            video.play();
        }).catch(function (PermissionDeniedError) {
            console.log(PermissionDeniedError);
        })
    }
	
    function takePhoto() {
        //获得Canvas对象
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);
		//得到图片的base64格式
		var base64 = canvas.toDataURL();
		        
		// location.href="FaceServlet?data="+base64;
		console.log(base64)
		//创建json数据格式
		        
		 //异步传递到servlet
		        
		        
		 $.ajax({
		  url:"AttendanceServlet?op=FaceLogin",    //请求的url地址
		  dataType:"json",   //返回格式为json
		  async:true,//请求是否异步，默认为异步，这也是ajax重要特性
		  // contentType:"application/json",
		  data: {"imagebast64": base64} , //参数值,为key:value形式
		  type: "POST", //请求方式
		  success:function(data){
		     console.log(data);
		     //得到json的msg，进行页面提示
		     //$("#msg").html(data);
		     ////判断是否登录的状态，1是人脸识别登录成功2是人脸检测失败3是查无此人联系HR
		     if(data.code==1){
		    	 //就设置数据隐藏域，1是人脸识别登录成功
		    	 $("#area").val(1);
		    	 //执行父窗口的方法（重要）
		    	 //console.log($("#area").val());
		    	 childDbClick();
		    	 //window.location.href = "GetEmpAll.jsp";
		     }else if(data.code==2){
		    	 $("#msg").html(data.msg);
		     }else if(data.code==3){
		    	 $("#msg").html(data.msg);
		     }
		     
		     
		        }	      		
		    })
		
    }
	

	
</script>
</body>
</html>


